Vue-cli
2022-04-21
Vue CLI 是一个由vue.js官方所发布的一个快速构建 vue 项目的脚手架，通过使用 vue-cli可以构建一个标准的 vue 项目。
安装
npm
安装 Vue 我们主要通过脚手架来进行，vue 为此提供了两种可需方案，分别为nmp install -g vue-cli 或使用cnpm install -g vue-cli来进行安装，我们可以配置下全局安装 cnpm
cnpm
1 | npm install cnpm -g --registry=https://registry.npm.taobao.org |
当安装完成之后可以使用 vue --version来查看是否安装成功，如安装成功之后则进行下一步。
构建
在vue-cli中，分别有两种方式，可使用vue create project-name来构建一个 vue-cli项目，也可以通过使用 vue ui及 web gui 的形式来进行构建。
运行
当构建完成一个 vue 项目之后，我们可以通过npm脚手架来进行运行服务也可以通过使用 vue 进行，两者之间的区别就是通过使用 npm run serve脚手架运行不需要安装@vue/cli-service-global依赖，而 通过使用 vue serve来运行会经过漫长的等待来安装依赖，但等待并不是没有用的，vue 的用户体验是很棒的。
目录
| ID | DA | FA |
|---|---|---|
| build | 项目构建时的相关代码 | 项目构建 |
| build.js | 生产环境构建代码 | |
| check-version.js | 用于检查 node,npm 版本 | |
| utils.js | 构建工具 | |
| vue-loader.conf.js | loader 配置 | |
| webpack.base.conf.js | webpack 基础配置 | |
| webpack.dev.conf.js | webpack 开发环境配置，用于构建本地服务器 | |
| webpack.prod.conf.js | webpack 生产环境配置 | |
| config | 项目开发环境配置 | 项目配置 |
| dev.env.js | 开发环境变量 | |
| index.js | 项目配置变量 | |
| prod.env.js | 生产环境变量 | |
| src | 源码目录 | 工作空间 |
| components | 公共组件 | |
| router | 路由管理 | |
| App.vue | 页面入口文件 | |
| main.js | 程序入口文件 | |
| static | 静态文件资源存放 | |
| .babelrc | ES6 语法编译配置 | |
| .editorconfig | 定义代码格式 | |
| .gitignore | git 上传需要忽略的文件格式 | |
| .postcssrc | postcss 配置文件 | |
| README.md | 说明文件 | |
| index.html | 入口文件 | |
| package.json | 项目基本信息 ，包依赖信息…… |